<template>
	<div class="wrap">
		<div class="banner">
			<mt-swipe :auto="4000">
				<mt-swipe-item>
					<img src="../../assets/image/banner1.jpg">
				</mt-swipe-item>
			</mt-swipe>
		</div>
		<div class="menu-box">
			<div class="inbox-warp" v-for="(item, index) in menuList" :key="index" @click="go(item)">
				<div class="inbox">
					<img :src="item.thumbnail">
				</div>
				<p class="in-title">{{item.cateName}}</p>
			</div>
		</div>
		<div class="bottom">
			<img src="../../assets/image/inbottom.png">
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				menuList: []
			}
		},
		methods: {
			go: function (item) {
				var that = this
				var path = ''
				if (item.type === 'article') {
					window.location.href = 'http://www.xzgjj.com/'
					return false
				} else if (item.type === 'articles') {
					path = 'articlelist'
				} else if (item.type === 'child-column') {
					path = 'inHot'
				}
				that.$router.push({
					name: path,
					query: {
						id: item.id,
						title: item.cateName
					}
				})
			},
			getType: function () {
				var that = this
				that.$axios.requestget('/page/category/109')
					.then((res) => {
						that.menuList = res.categories
					})
			}
		},
		mounted (){
			this.getType()
		}
	}
</script>

<style>
/*	html{
		background: #fafafa;
	}*/
	.menu-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background: #fff;
		border-bottom: #cdcdcd solid 1px;
	}

	.inbox-warp {
		width: 25%;
		padding: 36px 0;
		box-sizing: border-box;
		border-right: #cdcdcd solid 1px;
		border-bottom: #cdcdcd solid 1px;
	}

	.inbox-warp:nth-child(4) {
		border-right: none;
	}
	.inbox-warp:nth-child(5) {
		border-bottom: none;
	}
	.inbox-warp:nth-child(6) {
		border-bottom: none;
	}
	.inbox-warp:nth-child(7) {
		border-bottom: none;
	}
	.inbox {
		width: 66px;
		height: 66px;
		margin-left: 50%;
		transform: translateX(-50%);
		border-radius: 12px;
		overflow: hidden;
	}
	.inbox>img{
		width: 100%;
		height: 100%;
	}

	.in-title {
		margin-top: 16px;
		text-align: center;
		font-size: 22px;
		color: #323232;
	}

	.bottom {
		width: 750px;
		position: absolute;
		bottom: 0
	}

	.bottom>img {
		display: block;
		width: 100%;
	}
</style>
